
<template>
  <div>
    <div class="zong_box">
      <!-- 左边盒子 -->
      <div class="zuoce_box">
        <div class="image_logo">
          <img src="@/assets/logo.png" alt="">
        </div>
        <!-- 开始 -->
        <el-row class="tac">
          <el-col :span="12">
            <el-menu  default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
              background-color="#ffffff" text-color="#262335" active-text-color="#ff7a63">
              <!-- 工作台开始 -->
              <el-menu-item index="4" @click.native="fn1">
                <i class="iconfont" style="margin-right: 10px;">&#xe66b;</i>
                <span slot="title">工作台</span>
              </el-menu-item>
              <!-- 基础数据管理开始 -->
              <el-submenu index="1">
                <template slot="title">
                  <i class="iconfont" style="margin-right: 10px;">&#xe616;</i>
                  <span>基础数据管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" @click.native="fn2">机构管理</el-menu-item>
                  <el-menu-item index="1-2">机构作业范围</el-menu-item>
                  <el-menu-item index="1-3">运费管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 车辆管理开始 -->
              <el-submenu index="2">
                <template slot="title">
                  <i class="iconfont" style="margin-right: 10px;">&#xe65f;</i>
                  <span>车辆管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-4">车型管理</el-menu-item>
                  <el-menu-item index="1-5">车辆列表</el-menu-item>
                  <el-menu-item index="1-6">回车登记</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 员工管理 -->
              <el-submenu index="3">
                <template slot="title">
                  <i class="iconfont" style="margin-right: 10px;">&#xea41;</i>
                  <span>员工管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-7">快递员管理</el-menu-item>
                  <el-menu-item index="1-8">司机管理</el-menu-item>
                  <el-menu-item index="1-9">排版管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 业务管理 -->
              <el-submenu index="4">
                <template slot="title">
                  <i class="iconfont" style="margin-right: 10px;">&#xe65b;</i>
                  <span>业务管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-10">订单管理</el-menu-item>
                  <el-menu-item index="1-11">运单管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <!-- 调度管理 -->
              <el-submenu index="5">
                <template slot="title">
                  <i class="iconfont" style="margin-right: 10px;">&#xe6b6;</i>
                  <span>调度管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-12">运输任务管理</el-menu-item>
                  <el-menu-item index="1-13">路线管理</el-menu-item>
                  <el-menu-item index="1-14">取件作业管理</el-menu-item>
                  <el-menu-item index="1-15">派件作业管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
        <!-- 结束 -->
      </div>
      <!-- 右边盒子 -->
      <div class="youcehezi">
        <!-- 这是顶部盒子 -->
        <div class="top_box">
          <div class="zuobian_box">{{this.title ? title: '工作台'}}</div>
          <div class="youbian_box">
            <!-- 用户头像+用户姓名 -->
            <div class="userinfo">
              <div class="touxiang_box">
                <img src="@/assets/avatar/default.jpg" alt="">
              </div>
            </div>
            <!-- 退出登录的按钮 -->
            <div class="gly_tuichu">
              <span>管理员</span>
              <button style="border: none; cursor: pointer;" @click="tuichu_btn"><img src="@/assets/tuichu.png" alt=""></button>
            </div>
          </div>
        </div>
        <!-- 这里是二级路由的出口 -->
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HoMe',
  data () {
    return {
      title: ''
    }
  },

  mounted () {
  },
  beforeMount () {
  },

  methods: {
    /* 按下后退出登录的按钮 */
    tuichu_btn () {
      /* 调用vuex中的方法来清除token */
      this.$store.commit('user/DELETETOKEN')
      /* 清除完记得提醒清除完毕 然后跳转到登录页面 */
      this.$message('成功退出')
      this.$router.push('/login')
    },
    fn1 () {
      this.$router.push('/shouye', () => {}, (e) => {
        console.log('重复点击路由')
      })
      this.title = '工作台'
    },
    fn2 () {
      this.$router.push('/jiegou', () => {}, (e) => {
        console.log('重复点击路由')
      })
      this.title = '机构管理'
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>
.gly_tuichu{
   span{
    margin-left: 10px;
    margin-right: 16px;
    font-size: 12px;
    height: 50%;
    padding: 0 10px;
    border-right: 1px solid black;
   }
}
.touxiang_box{
  width: 30px;
  height: 30px;
}
.userinfo{
  line-height: 69px;
  img{
    width: 100%;
    height: 100%;
    border-radius: 30px;
  }
}
.top_box{
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f3f5f9;
}
.zuobian_box{
  flex: 1;
  margin-left: 20px;
  font-weight: 800;
}
.youbian_box{
  display: flex;

  margin-right: 20px;
}

.el-col-12{
  width: 100% !important;
}
.el-col .el-col-12{
width: 50%;
height: 100%;
}
.image_logo {
  width: 100%;
  height: 138px;
  margin-top: 20px;

  img {
    width: 100%;
    height: 97%;
  }
}

.zong_box {
  width: 100%;
  height: 100vh;
  display: flex;

  .zuoce_box {
    width: 212px;
    background-color: #ffffff;
  }

  .youcehezi {
    width: 100%;
    background-color: #f3f5f9;
  }
}

* {
  padding: 0;
  margin: 0;
}
</style>
